<header focusOnNavigation class="docs-header-background"
        [class.is-next-version]="isNextVersion" aria-label="Get started" id="homepage-header">
  <div class="docs-header-section">
    <div class="docs-header-headline">
      <h1 class="mat-h1">Angular Material</h1>
      <h2> Material Design components for Angular</h2>
    </div>
    <div class="docs-header-start">
      <a mat-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
    </div>
  </div>
</header>

<main class="docs-homepage-promo">
  <div class="docs-homepage-row docs-introduction">
    <div class="docs-homepage-row-column">
      <h2>High quality</h2>
      <p>
        Internationalized and accessible components for everyone. Well tested to ensure performance and reliability.
      </p>
      <p>Straightforward APIs with consistent cross platform behaviour.</p>
    </div>
    <div class="docs-homepage-row-column">
      <h2>Versatile</h2>
      <p>
        Provide tools that help developers build their own custom components with common interaction patterns.
      </p>
      <p>
        Customizable within the bounds of the Material Design specification.
      </p>
    </div>
    <div class="docs-homepage-row-column">
      <h2>Frictionless</h2>
      <p>
        Built by the Angular team to integrate seamlessly with Angular.
      </p>
      <p>
        Start from scratch or drop into your existing applications.
      </p>
    </div>
  </div>

  <mat-divider></mat-divider>

  <div class="docs-homepage-featured-components docs-homepage-carousel-row">
    <h2>Featured components</h2>
    <app-carousel [itemWidth]="260" [aria-label]="'Featured components'">
      <a *ngFor="let comp of getTopComponents()" carousel-item class='docs-featured-components-carousel-item'
         routerLink="/components/{{comp}}">
        <div class="docs-homepage-img-container">
          <img alt="" src="../../../assets/screenshots/{{comp}}.scene.png" role="presentation">
        </div>
        {{(comp[0].toUpperCase() + comp.slice(1)).replace('-', ' ')}}
      </a>
    </app-carousel>

    <a class="docs-link" routerLink="/components">
      View all components
      <mat-icon>chevron_right</mat-icon>
    </a>
  </div>

  <mat-divider></mat-divider>

  <div class="docs-homepage-guides docs-homepage-carousel-row">
    <h2>Guides</h2>
    <app-carousel [itemWidth]="260" [aria-label]="'Guides'">
      <a carousel-item class='docs-homepage-guides-carousel-item' *ngFor="let guide of guideItems.getAllItems()"
         routerLink='/guide/{{guide.id}}'>
        <mat-card class="docs-homepage-guides-card">
          <mat-card-title>{{guide.name}}</mat-card-title>
          <div class="docs-homepage-guides-card-divider"></div>
          <mat-card-content class="docs-component-category-list-card-summary">
            {{guide.overview}}
          </mat-card-content>
        </mat-card>
      </a>
    </app-carousel>

    <a class="docs-link" routerLink="/guides">
      View all guides
      <mat-icon>chevron_right</mat-icon>
    </a>
  </div>

</main>

<app-footer></app-footer>
